<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户登录注册界面</title>
	<link rel="stylesheet" type="text/css" href="../static/login/css/styles.css" th:href="@{../static/login/css/styles.css}">
	  <link rel="stylesheet" href="../static/login/css/jigsaw.css" th:href="@{../static/login/css/jigsaw.css}">
	  <style>
	  	
	  	  #msg {
      width: 100%;
      line-height: 40px;
      font-size: 14px;
      text-align: center;
    }
	  </style>
</head>
<body>
	<div class="jq22-container" style="padding-top:100px">
		<div class="login-wrap">
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab" th:text="#{login.login}">登录</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab" th:text="#{login.register}">注册</label>
				<div class="login-form">
					<form th:action="@{/user/login}" method="post" onsubmit="return sub()">
					<div class="sign-in-htm">
						<div class="group">
							<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
						</div>
						<div class="group">
							<label for="user" class="label" th:text="#{login.username}">用户名</label>
							<input id="username" name="username" value="admin" type="text" class="input">
						</div>
						<div class="group">
							<label for="pass" class="label" th:text="#{login.pwd}">密码</label>
							<input id="password" name="password" type="password" class="input" data-type="password">
						</div>
						<div class="group">
							<div class="container">
							    <div id="captcha" style="position: relative" data-type="password"></div>
								<div id="msg"></div>
							</div>
						</div>
						<!--<div class="group">-->
							<!--<input id="check" type="checkbox" class="check" checked>-->
							<!--<label for="check"><span class="icon"></span> 保持登录</label>-->
						<!--</div>						-->
						<div class="group">
							<!--<input type="submit" class="button"  value="登录" onClick="sub()">  -->
							<button class="button" type="submit" th:text="#{login.type}" >登录</button>  <!--onClick="sub()" -->
						</div>
						<div class="foot-lnk">
							<a href="updatePwd.html" th:href="@{/updatePwd.html}" th:text="#{forget.pwd}">忘记密码?</a>
						</div>
						<div class="hr"></div>
						<div class="foot-lnk">
							<a th:href="@{/login.html(l='zh_CN')}">中文</a>
							<a th:href="@{/login.html(l='en_US')}">English</a>
						</div>

					</div>
					</form>
					<form th:action="@{/user/reg}" method="post" onsubmit="return register()">
					<div class="sign-up-htm">
						<div class="group">
							<label for="user" class="label" th:text="#{register.username}">用户名</label>
							<input id="reguser" name="username" type="text" class="input">
						</div>
						<div class="group">
							<label for="pass" class="label" th:text="#{register.pwd}">密码</label>
							<input id="regpasss1" name="password" type="password" class="input" data-type="password">
						</div>
						<div class="group">
							<label for="pass" class="label" th:text="#{register.pwd2}">重复密码</label>
							<input id="regpasss2" name="regpasss2" type="password" class="input" data-type="password">
						</div>
						<div class="group">
							<label for="pass" class="label" th:text="#{register.phone}" >电话</label>
							<input id="regphone" name="phone" type="text" class="input" onblur="sendYzm()">
						</div>
						<div class="group">
							<label for="pass" class="label" th:text="#{register.vcode}" >验证码</label>
							<input id="ajaxYzm" name="ajaxYzm" type="hidden" >
							<input id="yzm" name="yzm" type="text" class="input">
						</div>
						<div class="group">
							<button class="button" type="submit" th:text="#{register.type}">注册</button>  <!--onClick="sub()" -->
						</div>
						<div class="hr"></div>

					</div>
					</form>
				</div>
			</div>
		</div>
	</div>	
	<script src="../static/login/js/jigsaw.js" th:src="@{../static/login/js/jigsaw.js}"></script>
	<script src="../static/js/jquery.js"></script>
<script>
	var flag = false;
	// 登录验证
	function sub(){
		var username = document.getElementById("username").value;
		var pwd = document.getElementById("password").value;
		if("" == username || "" == pwd){
			alert("用户名或密码不能为空！！！");
			return false;
		}
		if(flag==false){
			alert("验证失败!")
			return false;
		}
		return true;
	}
	jigsaw.init(document.getElementById('captcha'), function () {
		flag=true;
		if("en_US" == getQueryString("l")){
			document.getElementById('msg').innerHTML = 'Verify success！'
		}else{
			document.getElementById('msg').innerHTML = '验证成功！'
		}

	})

	// 注册验证
	function register(){
		var reguser = document.getElementById("reguser").value;
		var regpasss1 = document.getElementById("regpasss1").value;
		var regpasss2 = document.getElementById("regpasss2").value;
		var regphone = document.getElementById("regphone").value;

		if("" == reguser || "" == regpasss1 || "" == regpasss2 || "" == regphone ){
			alert("必填项不能为空！！！");
			return false;
		}
		if(regpasss1 != regpasss2 ){
			alert("两次输入的密码不一致！！！");
			return false;
		}
		var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
		if(!TEL_REGEXP.test(regphone)){
			alert("请输入正确的电话号码");
			return false;
		}
		return true;
	}
	// 获取地址栏参数信息
	function getQueryString(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if(r!=null)return  unescape(r[2]); return null;
	}

	function sendYzm() {
		var phone = document.getElementById("regphone").value;
		var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
		if(!TEL_REGEXP.test(phone)){
			alert("请输入正确的电话号码");
			return false;
		}
		$.ajax({
			url: "/verCode" + "/" + phone,
			type: 'post',
			data:{},
			success:function (data) {
			//	alert("您的验证码是:"+ data);
				document.getElementById("ajaxYzm").value = data;
			},
			error:function (data) {
				alert(2);
			}

		});
	}
</script>
</body>
</html>